import React from 'react';
import { Card, Button, Row, Divider, Col } from 'antd';
import BaseForm from 'shared/components/BaseForm/BaseForm1.jsx';
import PaginationTable from 'shared/components/PaginationTable';

import "./index.less"

export default class ListData extends React.Component {
  render() {
    const {
      formList,
      filterSubmit,
      optBtns,
      columns,
      dataSource,
      pagination,
      onRow,
      rowClassName,
      rowKey,
      resetFilterCondition,
      cardBorder=true,
      extraContent,
    } = this.props;
    return (
      <div style={{height: "100%"}}>
        {formList && formList.length > 0 ? (
          <Card  className="adt-list-data__card">
            <BaseForm formList={formList} onReset={resetFilterCondition} filterSubmit={filterSubmit} wrappedComponentRef={inst => {
              this.filterForm = inst;
            }}/>
          </Card>
        ) : null}
        <Card bordered={cardBorder} className="adt-list-data__card">
          {optBtns && optBtns.length > 0 || extraContent ? (
            <Row type="flex" justify="space-between" className="adt-list-data__card-extra">
              {
                optBtns && optBtns.length && (
                  <Col className="adt-list-data__optBtns">
                    {optBtns.map(({label, ...rest}, index) => (
                      <Button key={index} {...rest}>
                        {label}
                      </Button>
                    ))}
                  </Col>
                )
              }
              {
                extraContent && (<Col>{extraContent}</Col>)
              }
            </Row>
          ) : null}
          {
            optBtns && optBtns.length > 0  ? (
              <Divider style={{margin: '10px 0'}}/>
            ) : null
          }
          <PaginationTable
            columns={columns}
            dataSource={dataSource}
            pagination={pagination}
            onRow={onRow}
            rowClassName={rowClassName}
            size="middle"
            rowKey={ rowKey || "id" }
          />
        </Card>
      </div>
    );
  }
}
